import React, { useState, useMemo } from 'react'
// import Demo01 from '../../components/Demo01'
// import Demo02 from '../../components/Demo02'

const nameList = ['apple', 'peer', 'banana', 'lemon']

export default () => {
  const [price, setPrice] = useState(0)
  const [name, setName] = useState('apple')

  const getProductName = useMemo(() => {
    console.log('getProductName 触发')
    return name
  }, [name])

  return (
    <div>
      <h2>批量修改门店商品</h2>
      <p>{name}</p>
      <p>{price}</p>
      <p>{getProductName}</p>
      <button onClick={() => setPrice(price + 1)}>价钱+</button>
      <button onClick={() => setName(nameList[Math.floor(Math.random() * nameList.length)])}>修改名字</button>
    </div>
  )
}
